import React from 'react'
import ArticleList from './components/articleList'
import { BackTop,message,Spin  } from 'antd'
import { getArticleList } from '@/api/index'
import { articleIsLike } from '@/api/article'
import { PlusOutlined ,LoadingOutlined} from '@ant-design/icons'
import './index.scss'
import Store from '../../store'

interface IProps{ }
interface IState{
    pageNum: number;
    pageSize: number;
    articleList: any;
    isMore: boolean;
    isPending: boolean;
 }

const antIcon = <LoadingOutlined style={{ fontSize: 24 ,color:'red'}} spin />;
class Article extends React.Component<IProps,IState> {
    constructor(props) {
        super(props)
        this.state = Store.keepState.article ? Store.keepState.article.state : {
            pageNum: 1,
            pageSize: 10,
            articleList: {}, // 文章列表,通过月份分组
            isMore: true, // 是否还有更多
            isPending: false,// 是否正在加载
        }
    }
    componentDidMount() {
        if (Store.keepState.article) {
            window.scrollTo(0,Store.keepState.article.height) 
        } else {
            this.getArtList()
        }

    }
    componentWillUnmount() {
        // 手动保持当前页面状态
        Store.addKeepState('article', {
            state: this.state,
            height: window.scrollY,
            width: window.scrollX
        })
    }
    updateArticleList = (obj) => {
        this.setState({ articleList: obj })
    }
    groupByMonth =(arr)=>{ // 通过月份分组
        let obj ={...this.state.articleList}
        console.log('分组前的数据',obj)
        arr.forEach((item,index)=>{
            if(!obj[item.months]){
                obj[item.months] =[]
                obj[item.months].push(item)
            }else{
                obj[item.months].push(item)
            }
            
        })
        this.setState({articleList:obj})
        console.log('分组后的数据',obj)
        return obj 
        
    }
    getArtList = async () => {
        this.setState({ isPending: true })
        try {
            const res:any = await getArticleList({ pageNum: this.state.pageNum, pageSize: this.state.pageSize })
        if (res.code === 200) { 
            this.groupByMonth(res.rows) 
            // this.setState(state => ({ articleList: [...state.articleList, ...res.rows] }))
            if (Store.loginStatus) { // 登录后判断文章用户是否喜欢过
                let arr = res.rows.map((item, index) => {
                    articleIsLike({
                        articleId: item.id,
                        userId: Store.userInfo.userId
                    }).then((res:any) => {
                        if (res.code === 200 && res.data) {
                            let articleList = {...this.state.articleList}
                            articleList[item.months].forEach((article,article_index)=>{
                                if(article.id == item.id){
                                    article.isLike = res.data
                                    return
                                }
                                
                            })
                            this.setState({ articleList: articleList },()=>{
                                 console.log(this.state.articleList,'hahahhahah')
                            })
                           
                        }
                        return res
                    })
                })
            }
            console.log(this.state.pageSize)
            if (res.rows.length < this.state.pageSize) { // 判断是否还有其他文章
                this.setState({ isMore: false })
            }
            this.setState({ isPending: false })
        } else {
            this.setState({ isPending: false })
        }
        } catch (error) {
            this.setState({ isPending: false })
            message.error(error)
        }
        
    }
    loadMore = async () => { // 加载更多
        await this.setState({ pageNum: this.state.pageNum + 1 })
        this.getArtList()
    }
    render() {
        return (
            < div >
                <ArticleList articleList={this.state.articleList} parent={this} />
                <div className='load-more-warrper'>
                    {
                        this.state.isMore ?
                            <div className='load-more' onClick={this.loadMore}>
                                {
                                 this.state.isPending ? 
                                 <>
                                 ---&nbsp;
                                   <Spin indicator={antIcon} />
                                   &nbsp; ---
                                   </>
                                  :
                                 <>
                                 <span>加载更多</span> &nbsp;
                                <PlusOutlined />
                                </>
                                }
                                
                            </div>
                            :
                            <div className='no-more'>没有更多了。。。</div>
                    }

                </div>
                <BackTop />
            </div>
        )
    }
}
export default Article